<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topfilter" :list="topFilterList" :cols="4" labelWidth="85" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!--操作 -->
    <button-area :style="{ paddingLeft: '80px' }"></button-area>
    <!-- 列筛选-->
    <!-- :fetchapi="fetchApi" -->
    <FilterTable
      ref="table"
      columnsRef="zxUsedCardQuality"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchApi"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectData"
    >
      <template slot="controls" slot-scope="props">
        <multiuse-button type="primary" :click="exportHandle.bind(this)">导出</multiuse-button>
      </template>
      <!--列操作-->
      <!-- <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandle">新增</el-button>
        <AjaxButton size="small" type="danger" :click="removeHandler">删除</AjaxButton>
      </template> -->
    </FilterTable>

    <!--抽屉 -->
    <Drawer :visible.sync="visible" :title="dialogTitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <QualityModal :type="handleType" :rowData="formData" @close="closeHandler" />
    </Drawer>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getDealerReceive, exportDealerReceive } from '@/api/repair/queryStatistics/queryAccounts';
import { dealerMixin } from '@/pages/repair/batchEventManagement/dealerMixin';
import moment from 'moment';

// import { getUsedCardQualitys } from '@/api/usedcar/basic/qaproduct'; // 页面调用的的方法,对应的路径连接后台

export default {
  name: 'zxUsedCardQuality',
  components: {
    // QualityModal
  },
  mixins: [dictionary, dealerMixin],
  data() {
    this.conf = { add: '新增', delete: '删除', edit: '编辑', show: '显示' };
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      visible: false,
      visible1: false,
      dialogTitle: '',
      // fetchApi: getUsedCardQualitys,
      columns: this.createTableColumns(),
      handleType: '',
      fetchApi: getDealerReceive,
      formData: {},
      tableData: [],
      ids: []
    };
  },
  mounted() {
    // 分页
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'DATE',
          label: '请选择年月',
          fieldName: 'month',
          placeholder: '请选择...',
          dateType: 'month',
          initialValue: moment().format('YYYY-MM')
        }
      ];
    },
    createTableColumns() {
      return [
        // {
        //   title: '操作',
        //   dataIndex: 'column-action',
        //   width: 60,
        //   fixed: 'left',
        //   render: props => {
        //     return (
        //       <div>
        //       <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
        //     编辑
        //     </el-button>
        //     </div>
        //   );
        //   }
        // },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_NAME',
          filter: true,
          sorter: true
        },
        {
          title: '车型',
          dataIndex: 'MODEL_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '费用类型',
          dataIndex: 'type',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '合计',
          dataIndex: 'amount',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '01',
          dataIndex: '01',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '02',
          dataIndex: '02',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '03',
          dataIndex: '03',
          sorter: true,
          filter: true,
          filterType: 'number'
        },

        {
          title: '04',
          dataIndex: '04',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '05',
          dataIndex: '05',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '06',
          dataIndex: '06',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '07',
          dataIndex: '07',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '08',
          dataIndex: '08',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '09',
          dataIndex: '09',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '10',
          dataIndex: '10',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '11',
          dataIndex: '11',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '12',
          dataIndex: '12',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '13',
          dataIndex: '13',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '14',
          dataIndex: '14',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '15',
          dataIndex: '15',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '16',
          dataIndex: '16',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '17',
          dataIndex: '17',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '18',
          dataIndex: '18',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '19',
          dataIndex: '19',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '20',
          dataIndex: '20',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '21',
          dataIndex: '21',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '22',
          dataIndex: '22',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '23',
          dataIndex: '23',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '24',
          dataIndex: '24',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '25',
          dataIndex: '25',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '26',
          dataIndex: '26',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '27',
          dataIndex: '27',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '28',
          dataIndex: '28',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '29',
          dataIndex: '29',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '30',
          dataIndex: '30',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '31',
          dataIndex: '31',
          sorter: true,
          filter: true,
          filterType: 'number'
        }
      ];
    },
    selectData(val) {
      this.tableData = val;
    },
    addHandle() {
      // 新建
      this.handleType = 'add';
      this.showHandler();
    },
    // async removeHandler() {
    //   // 删除
    //   if (!this.tableData.length) {
    //     return this.$notify({
    //       title: '提示信息',
    //       message: '请选择数据',
    //       type: 'error'
    //     });
    //   }
    //   await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   });
    //   // console.log(999);
    //   await this.deleteDialog(); // 执行删除方法
    //   // console.log(999);
    // },
    // async deleteDialog() {
    //   // 取出数据id
    //   let res = {};
    //   this.ids = this.tableData.map(x => x.qualityId); // 获取选中页面的ID加到map集合中
    //
    //   res = await deleteUsedCardQualitys({ ids: this.ids.join(',') });
    //   // alert("aaaaaa"+res);
    //   // console.log(res);
    //   // 判断结果
    //   // alert("aaaaa"+res.resultCode+"aaa");
    //   if (res.resultCode === 200) {
    //     // alert(this.res);
    //     // console.log(res.data);
    //     if (res.data) {
    //       this.fetchParams = { ...this.fetchParams }; // 重复新加载
    //
    //       return this.$notify({
    //         // 提示信息
    //         title: '提示信息',
    //         message: '删除成功',
    //         type: 'success'
    //       });
    //     }
    //   }
    // },
    // editHandle(row) {
    //   this.handleType = 'edit'; // 编辑
    //   this.formData = row;
    //   this.showHandler();
    // },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    showHandler() {
      // 显示
      this.dialogTitle = `${this.conf[this.handleType]}新车保养费用申请单`;
      this.visible = true;
    },
    async exportHandle() {
      const [err, params] = await this.$refs.topfilter.GET_FORM_DATA();
      let map = JSON.parse(JSON.stringify(params));
      console.log('mapL::', map);
      try {
        await this.downHandleFile(exportDealerReceive, map, '营业收入汇总');
      } catch (e) {
        console.log(e);
      }
    },
    closeHandler(val, type) {
      // 关闭
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
};
</script>

<style lang="less" scoped></style>
